<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>管家服务</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="personal_center bulter_service inner_page">
    <header>
        管家服务
        <a href="javascript:void(0)" class="pre_page"></a>
        <a href="index.html" class="home"></a>

    </header>

    <section class="main">
       <div class="container">
           <ul class="service_list">
               <li>
                   <h2>装修帮1对1管家式服务</h2>
                   <p>有问题    找管家    全程可控状态</p>
                   <p>只需一个电话或者一条微信   管家即会为您解除困恼</p>
                   <div class="pic">
                       <img src="img/service.jpg" alt="">
                   </div>

               </li>
               <li>
                   <h2>节点验收</h2>
                   <p>免费第三方监理以专业的眼光看待装修问题</p>
                   <p>不合格一律要求整改</p>
                   <ol>
                       <li>
                           <img src="img/work.png" alt="">
                           <p>工地检察</p>
                       </li>
                       <li>
                           <img src="img/knowledge.png" alt="">
                           <p>装潢知识</p>
                       </li>
                       <li>
                           <img src="img/license.png" alt="">
                           <p>

                               执证上岗
                           </p>
                       </li>
                   </ol>
               </li>
               <li>
                   <h2>资金托管</h2>
                   <p>资金由装潢之家托管20%，装修满意再付款</p>
                   <div class="pic">
                       <img src="img/trust.jpg" alt="">
                   </div>
               </li>
               <li>
                   <h2>水电透明</h2>
                   <p>水电隐蔽工程视频，让用户一目了然</p>
                   <div class="pic">
                       <img src="img/water.jpg" alt="">
                   </div>
               </li>
               <li>
                   <h2>快速维权</h2>
                   <p>贯彻不扯皮，不拖拉，快速响应，限时装修公司整改</p>
                   <div class="pic">
                       <img src="img/right.jpg" alt="">
                   </div>
               </li>

           </ul>
           <form action="" class="bulter_form container">
                <h2>  免费预约</h2>
               <div class="error_message">

               </div>
               <ul>
                   <li>

                       <input type="text" placeholder="你的名字" name="name" id="name" onblur="checkEmpty(this,'姓名不能为空')">
                   </li>
                   <li>
                       <input type="text" placeholder="联系方式" name="telephone" id="telephone" onblur="checkTel(this)">
                   </li>
                   <li>
                       <select name="province" id="s_province">
                           <option disabled value="所在省份" selected="selected">所在省份</option>
                       </select>
                   </li>

                   <div class="clear"></div>
               </ul>

               <input type="submit" value="免费预约管家服务" onclick="checkInfo()">

           </form>


       </div>

    </section>


</body>
<script src="js/jquery.js"></script>
<script src="js/area.js"></script>
<script type="text/javascript">_init_area(["s_province"]);</script>
<script>
    /*校验手机号码*/
    function checkTel(obj){
        obj.errorFlag = false;
        if (checkEmpty(obj,'请您填写手机号码')) {
            obj.errorFlag = true;
            return  obj.errorFlag;
        }
        if(!(/^1[3|4|5|7|8]\d{9}$/.test(obj.value))){
            showErrorMessage("输入手机号码不正确");
            obj.errorFlag = true;
        }else{
            clearErrorMessage();
        }
        return  obj.errorFlag;
    }
    /*检测是否为空*/
    function checkEmpty(obj,message){
        if(obj.value==''){
            showErrorMessage(message);
            return true;
        }else{
            return false;
        }
    }
    /*检测计算数据*/
    function checkInfo(){
        var elTel=document.getElementById("telephone");
        var elName=document.getElementById("name");


        if(checkEmpty(elName,"姓名不能为空")){
            console.log("333");
            $(".bulter_form").submit(false);
            return;
        }

        if(checkTel(elTel)){
            console.log("2222");
            $(".bulter_form").submit(false);
            return;
        }
        /*检测地区*/
        if($("#s_province option:checked").eq(0).index()==0){
            console.log("1111");
            showErrorMessage("请选择所在地区")
            $(".bulter_form").submit(false);
            return;

        }
        $(".bulter_form").submit();

    }

    function showErrorMessage(message){
        $(".error_message").html("*"+message);
    }

    function clearErrorMessage() {
        $(".error_message").html("");
    }


</script>
</html>